<template>
  <d-dialog
    ref="dialog"
    :header="formData.isEdit ? '编辑字典数据' : '新增字典数据'"
    api="system/dict/data"
    v-model:data="formData"
    v-model:visible="visible"
    :rules="rules"
    :handleParams="handleParams"
  >
    <t-form-item label="字典类型">
      <t-input disabled v-model="formData.dictType" placeholder="请输入字典类型"></t-input>
    </t-form-item>
    <t-form-item label="数据标签" name="dictLabel">
      <t-input v-model="formData.dictLabel" placeholder="请输入数据标签"></t-input>
    </t-form-item>
    <t-form-item label="标签翻译">
      <t-input v-model="formData.remark.i18nKey" placeholder="请输入标签翻译key"></t-input>
    </t-form-item>
    <t-form-item label="数据键值" name="dictValue">
      <t-input v-model="formData.dictValue" placeholder="请输入数据键值"></t-input>
    </t-form-item>
    <t-form-item label="排序" name="dictSort">
      <t-input-number
        v-model="formData.dictSort"
        placeholder="请输入"
        theme="column"
        style="width: 100%"
      ></t-input-number>
    </t-form-item>
    <t-form-item label="状态" name="status">
      <t-radio-group v-model="formData.status" :options="dict.dict_enable_list" />
    </t-form-item>
    <!-- 备注用来做扩展字段 -->
    <!-- 物流 -->
    <template v-if="formData.dictType === 'common_logistics_config'">
      <t-form-item label="logo" name="logo">
        <d-upload v-model="formData.remark.logo" />
      </t-form-item>
      <t-form-item label="官网地址" name="website">
        <t-input v-model="formData.remark.website" placeholder="请输入官网地址"></t-input>
      </t-form-item>
      <t-form-item label="备注内容" name="remark">
        <t-textarea v-model="formData.remark.remark" placeholder="请输入备注内容" />
      </t-form-item>
    </template>
    <!-- 状态的标签颜色 -->
    <template
      v-if="
        [
          'sys_common_status',
          'sys_yes_no',
          'sys_normal_disable',
          'sys_show_hide',
          'sys_on_off',
          'product_order_status',
          'product_pay_status',
          'common_audit_status'
        ].includes(formData.dictType)
      "
    >
      <t-form-item label="标签主题" name="theme">
        <t-input v-model="formData.remark.theme" placeholder="请输入标签主题"></t-input>
      </t-form-item>
    </template>
    <!-- 发货地址 -->
    <template v-if="formData.dictType === 'product_ship_address'">
      <t-form-item label="发货人" name="userName">
        <t-input v-model="formData.remark.userName" placeholder="请输入发货人"></t-input>
      </t-form-item>
      <t-form-item label="电话" name="telephone">
        <t-input v-model="formData.remark.telephone" placeholder="请输入电话"></t-input>
      </t-form-item>
      <t-form-item label="发货地址" name="address">
        <t-input v-model="formData.remark.address" placeholder="请输入发货地址"></t-input>
      </t-form-item>
    </template>
    <!-- 收款账户 -->
    <template v-if="formData.dictType === 'common_bank_account'">
      <t-form-item label="账户名" name="account_name">
        <t-input v-model="formData.remark.account_name" placeholder="请输入账户名"></t-input>
      </t-form-item>
      <t-form-item label="银行账号" name="account_no">
        <t-input v-model="formData.remark.account_no" placeholder="请输入银行账号"></t-input>
      </t-form-item>
      <t-form-item label="银行名称" name="account_bank">
        <t-input v-model="formData.remark.account_bank" placeholder="请输入银行名称"></t-input>
      </t-form-item>
      <t-form-item label="银行地址" name="account_address">
        <t-input v-model="formData.remark.account_address" placeholder="请输入银行地址"></t-input>
      </t-form-item>
      <t-form-item label="银行代码" name="swift_code">
        <t-input v-model="formData.remark.swift_code" placeholder="请输入银行代码"></t-input>
      </t-form-item>
      <t-form-item label="账户类型" name="account_type">
        <t-radio-group v-model="formData.remark.account_type" :options="banck_account_list" />
      </t-form-item>
      <t-form-item label="是否默认">
        <t-radio-group v-model="formData.remark.isDefault" :options="dict.dict_yes_list" />
      </t-form-item>
    </template>
    <!-- 备注内容 -->
    <template v-if="formData.dictType === 'product_pay_status'">
      <t-form-item label="备注信息">
        <t-input v-model="formData.remark.remark" placeholder="请输入备注"></t-input>
      </t-form-item>
    </template>
    <template v-if="formData.dictType === 'product_cost_list'">
      <t-form-item label="输入类型">
        <t-radio-group v-model="formData.remark.inputType" :options="cost_options_list" />
      </t-form-item>
    </template>
    <template v-if="formData.dictType === 'common_bank_account_type'">
      <t-form-item label="单位">
        <t-input v-model="formData.remark.unit" />
      </t-form-item>
    </template>
    <template v-if="formData.dictType === 'product_order_status'">
      <t-form-item label="显示平台">
        <t-checkbox-group v-model="formData.remark.platform">
          <t-checkbox :key="item.value" :value="item.value" v-for="item in platform_list">{{
            item.label
          }}</t-checkbox>
        </t-checkbox-group>
      </t-form-item>
    </template>
    <template v-if="formData.dictType === 'sys_file_format'">
      <t-form-item label="后缀集合">
        <t-tag-input
          v-model="formData.remark.suffix"
          placeholder="请输入后缀，按回车确认"
        ></t-tag-input>
      </t-form-item>
    </template>
  </d-dialog>
</template>

<script setup>
import { merge, jsonToObj } from '@common'
import { useDict } from '@/store/dict'
import { ref, watch } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
const INIT_STATUS = {
  dictType: '',
  dictCode: '',
  dictLabel: '',
  dictValue: '',
  dictSort: undefined,
  status: '0',
  remark: '',
  logo: ''
}
const dict = useDict()
const cost_options_list = ref([
  {
    label: '金额',
    value: 1
  },
  {
    label: '比例',
    value: 2
  }
])
const platform_list = ref([
  {
    label: '平台',
    value: 0
  },
  {
    label: '供应商',
    value: 1
  },
  {
    label: '项目负责人',
    value: 2
  },
  {
    label: '采购',
    value: 3
  }
])
const banck_account_list = ref([])
const dialog = ref(null)
const visible = ref(false)
const formData = ref({ ...INIT_STATUS })
const rules = {
  dictLabel: [{ required: true, message: '请输入数据标签', trigger: 'blur' }],
  dictSort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
  dictValue: [{ required: true, message: '请输入数据键值', trigger: 'blur' }]
}
const getBankAccountList = async () => {
  banck_account_list.value = await dict.getDictByType('common_bank_account_type')
  console.log(banck_account_list.value)
  console.log(dict)
}

const show = async (info = {}) => {
  const obj = merge({ ...INIT_STATUS, isEdit: !!info.dictCode }, info)
  const remark = jsonToObj(obj.remark || '')
  formData.value = {
    ...obj,
    remark
  }
  visible.value = true
  if (formData.value.dictType === 'common_bank_account') {
    getBankAccountList()
  }
  if (formData.value.dictType === 'product_order_status') {
    const remark = jsonToObj(obj.remark || {})
    remark.platform = remark.platform || []
    formData.value.remark = remark
  }
  if (formData.value.dictType === 'sys_file_format') {
    if (remark?.suffix) {
      formData.value.remark.suffix = remark.suffix.split(',')
    } else {
      formData.value.remark.suffix = []
    }
  }
}
watch(
  () => formData.value.logo,
  (e) => {
    console.log(e)
  }
)
const handleParams = (params) => {
  const remark =
    params.remark && JSON.stringify(params.remark) !== '{}' ? JSON.stringify(params.remark) : ''
  if (remark?.suffix) {
    remark.suffix = remark.suffix.join(',')
  }
  if (params.remark?.value || params.remark?.label) {
    MessagePlugin.error('备注key不能为label和value')
    return false
  }
  return {
    ...params,
    remark
  }
}
defineExpose({ show })
</script>
